<template>
  <div>
    <div class="scroll-wrap">
      <p class="field">
        <span class="label">店铺名称:</span>
        <input
          v-model="form.shopName"
          type="text"
          placeholder="让用户记住你"
          class="input"
        />
      </p>
      <p class="field narrow">
        <span class="label">店铺LOGO:</span>
        <img :src="logo" alt="logo" class="logo" @click="handleChangeLogo" />
        <span class="icon"></span>
      </p>
      <p class="tip">
        <radio color="#ea435f" :checked="checked" @click="checked = !checked" />&nbsp;&nbsp;
        <span @click="linkClick">销售商入驻协议</span>
      </p>
      <button class="btn-action-red" @click="next">完成</button>
    </div>
  </div>
</template>

<script>
import myMixin from '../mixins'
import { CREATE_SHOP, UPLOAD_IMAGE } from '@/api/new-open-shop'
import { ADD_SHOP_CHANGE_APPLY_API } from '@/api'

export default {
  mixins: [myMixin],
  data () {
    return {
      isUpgrade: false,
      checked: false,
      form: {
        shopName: '',
        logo: `https://akk.028wkf.cn/lovekakaCY-weapp-img/new-kdb-xcx/img/loginlogo.png`
      }
    }
  },
  computed: {
    logo () {
      return (
        this.form.logo ||
        `https://akk.028wkf.cn/lovekakaCY-weapp-img/new-kdb-xcx/img/loginlogo.png`
      )
    }
  },
  onShow () {},
  methods: {
    linkClick () {
      let url = 'https://akk.028wkf.cn/'
      this.$router.push(
        `/pages/new-open-shop/link/main?url=${url}/servicePact/1000000000/servicePact.html`
      )
    },
    handleChangeLogo () {
      const vm = this
      vm.$loading.show()
      UPLOAD_IMAGE()
        .then(r => {
          let res = JSON.parse(r.data)
          vm.$loading.close()
          if (res.code === '0') {
            vm.form.logo = res.data.imgPath
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          vm.$loading.close()
          console.error(e)
        })
    },
    verify () {
      if (!this.form.shopName) {
        this.$toast('请输入店铺名称')
        return false
      }
      if (!this.checked) {
        this.$toast('请同意销售商入驻协议')
        return false
      }
      return true
    },
    next () {
      if (this.verify()) {
        if (this.$cookie.get('IS-UPGRADE')) {
          this.submitUpgrade()
        } else {
          this.submit()
        }
      }
    },

    /* api */
    submit () {
      const vm = this

      let storage = vm.$cookie.get('open-shop-pay-data') || '{}'
      let { customerId, mobile } = vm.$cookie.get('store-login')
      let providerId = vm.$store.state.account.providerId

      let params = {
        ...storage,
        ...vm.form,
        shopIdentity: vm.$cookie.get('openShopIdentity'),
        openShopOrderNo: vm.$cookie.get('openShopOrderNo'),
        customerId,
        providerId,
        cellphone: mobile
      }

      CREATE_SHOP(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$cookie.remove('open-shop-pay-data')
            if (r.data.isFreeTrial === 'Y') {
              vm.$router.push('/pages/new-open-shop/success/main?isFreeTrial=Y')
            } else {
              vm.$router.push('/pages/new-open-shop/success/main')
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    submitUpgrade () {
      const vm = this

      let storage = vm.$cookie.get('open-shop-pay-data') || '{}'
      let { customerId } = vm.$cookie.get('account').customerId
      let { mobile } = vm.$cookie.get('new-admin-info').phone

      let providerId = vm.$store.state.account.providerId

      let params = {
        ...storage,
        ...vm.form,
        shopIdentity: vm.$cookie.get('openShopIdentity'),
        openShopOrderNo: vm.$cookie.get('openShopOrderNo'),
        customerId,
        providerId,
        cellphone: mobile,
        shopId: vm.$cookie.get('account').shopId
      }

      ADD_SHOP_CHANGE_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            let title = ''
            let content = ''
            if (r.data.isFreeTrial === 'Y') {
              title = '开店成功'
              content = ''
            } else {
              title = '资料提交成功'
              content =
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115'
            }
            wx.showModal({
              title,
              content,
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: res => {
                if (res.confirm) {
                  vm.$cookie.remove('open-shop-pay-data')
                  vm.$cookie.remove('IS-UPGRADE')
                  if (r.data.isFreeTrial === 'Y') {
                    vm.$router.push(
                      '/pages/new-open-shop/success/main?isFreeTrial=Y'
                    )
                  } else {
                    vm.$router.push('/pages/new-open-shop/success/main')
                  }
                }
              },
              fail: err => {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('../styles/index.css');

.scroll-wrap {
  background-color: #f6f6f6;
  padding-top: 10px;
  > .field {
    > .label {
      width: 100px;
    }
    > .icon {
      // font-size: 16px;
      // font-weight: 600;
      // color: #adacad;
      width: 7px;
      height: 7px;
      border-top: 2px solid #adacad;
      border-right: 2px solid #adacad;
      transform: rotate(45deg);
    }
    > .input {
      width: calc(100% - 100px);
    }
    > .logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 5px;
    }
    &.narrow > .label {
      flex-grow: 1;
    }
  }
  > .tip {
    background-color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #bdbdbd;
    padding: 10px 20px;
    margin-bottom: 40px;
  }
}
</style>
